<template>
	<view>
		<view class="list-top">
			<view class="list-name">
				<view class="">周大金</view>
			</view>
			
			<view class="list-time">
				<view class="">{{currentTime}}</view>
				<view class="name">开市|实时金价</view>
			</view>
		</view>
		<!-- 题目栏 -->
		<view class="row-top hei">
			<text class="cell-top el-col-8">商品</text>
			<text class="cell-top el-col-6">回购</text>
			<text class="cell-top el-col-6">销售</text>
			<text class="cell-top el-col-6">高/低</text>
		</view>
		<!-- 现货行情 -->
		<view class="list">
			<view class="list_title">现货行情</view>
			<view class="table">
				<view class="row" v-for="(item,index) in glod_list" :key="index"
					v-bind:class="{ 'hei': index % 2 === 1 }" v-if="index<4">
					<text class="cell huang el-col-8">{{item.name}}</text>
					<block v-if="item.name==='白银'">
						<view class="cell el-col-6"
							:class="{'green': item.bidprice <= item.preclose, 'red': item.bidprice > item.preclose }">{{!isNaN(item.bidprice)?(item.bidprice*1).toFixed(3) : '--'}}</view>
						<view class="cell el-col-6 cell-buy">
							<view :class="{'green': item.askprice <= item.preclose, 'red': item.askprice > item.preclose }">
								{{!isNaN(item.askprice) ? (item.askprice*1).toFixed(3) : '--'}}
							</view>
							<!-- <view :class="{'green': item.askprice <= item.preclose, 'red': item.askprice > item.preclose }" @click="OnMetal_buying(item.code,item.askprice)">买入</view> -->
						</view>
					</block>
					<block v-else-if="item.name==='黄金'">
						<view class="cell el-col-6"
							:class="{'green': item.bidprice <= item.preclose, 'red': item.bidprice > item.preclose }">{{!isNaN(item.bidprice)?(item.bidprice*1).toFixed(2) : '--'}}</view>
						<view class="cell el-col-6 cell-buy">
							<view :class="{'green': item.askprice <= item.preclose, 'red': item.askprice > item.preclose }">
								{{!isNaN(item.askprice) ? (item.askprice*1).toFixed(2) : '--'}}
							</view>
							<!-- <view :class="{'green': item.askprice <= item.preclose, 'red': item.askprice > item.preclose }" @click="OnMetal_buying(item.code,item.askprice)">买入</view> -->
						</view>
					</block>
					<block v-else>
						<text class="cell el-col-6"
							:class="{'green': item.bidprice <= item.preclose, 'red': item.bidprice > item.preclose }">{{!isNaN(item.bidprice)?(item.bidprice*1).toFixed(2) : '--'}}</text>
						<text class="cell el-col-6"
							:class="{'green': item.askprice <= item.preclose, 'red': item.askprice > item.preclose }">{{!isNaN(item.askprice) ? (item.askprice*1).toFixed(2) : '--'}}</text>
					</block>
					<view class="cell hh el-col-6">
						<block v-if="item.name==='白银'">
							<view class="line">{{(item.high*1).toFixed(3)}}</view>
							<view class="line green">{{(item.low*1).toFixed(3)}}</view>
						</block>
						<block v-else>
							<view class="line">{{(item.high*1).toFixed(2)}}</view>
							<view class="line green">{{(item.low*1).toFixed(2)}}</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<!-- 上海黄金行情 -->
		<view class="list">
			<view class="list_title_shhjhq">上交所行情</view>
			<view class="table">
				<view class="row" v-for="(item,index) in glod_list" :key="index"
					v-bind:class="{ 'hei': index % 2 === 1 }" v-if="index>3 && index<7">
					<text class="cell huang el-col-8">{{item.name}}</text>
					<block>
						<text class="cell el-col-6"
							:class="{'green': item.bidprice <= item.preclose, 'red': item.bidprice > item.preclose }">{{!isNaN(item.bidprice)?(item.bidprice*1).toFixed(2) : '--'}}</text>
						<text class="cell el-col-6"
							:class="{'green': item.askprice <= item.preclose, 'red': item.askprice > item.preclose }">{{!isNaN(item.askprice) ? (item.askprice*1).toFixed(2) : '--'}}</text>
					</block>
					<view class="cell hh el-col-6">
						<block>
							<view class="line">{{(item.high*1).toFixed(2)}}</view>
							<view class="line green">{{(item.low*1).toFixed(2)}}</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<!-- 国际市场行情 -->
		<view class="list">
			<view class="list_title_gjschq">国际市场行情</view>
			<view class="table">
				<view class="row" v-for="(item,index) in glod_list" :key="index"
					v-bind:class="{ 'hei': index % 2 === 1 }" v-if="index>8 && index<15">
					<text class="cell huang el-col-8">{{item.name}}</text>
					<block>
						<text class="cell el-col-6"
							:class="{'green': item.bidprice <= item.preclose, 'red': item.bidprice > item.preclose }">{{!isNaN(item.bidprice)?(item.bidprice*1).toFixed(2) : '--'}}</text>
						<text class="cell el-col-6"
							:class="{'green': item.askprice <= item.preclose, 'red': item.askprice > item.preclose }">{{!isNaN(item.askprice) ? (item.askprice*1).toFixed(2) : '--'}}</text>
					</block>
					<view class="cell hh el-col-6">
						<block>
							<view class="line">{{(item.high*1).toFixed(2)}}</view>
							<view class="line green">{{(item.low*1).toFixed(2)}}</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<!-- 汇率 -->
		<view class="list">
			<view class="list_title_hl">汇率</view>
			<view class="table">
				<view class="row" v-for="(item,index) in glod_list" :key="index"
					v-bind:class="{ 'hei': index % 2 === 1 }" v-if="index==15">
					<text class="cell huang el-col-8">{{item.name}}</text>
					<block>
						<text class="cell el-col-6"
							:class="{'green': item.bidprice <= item.preclose, 'red': item.bidprice > item.preclose }">{{!isNaN(item.bidprice)?(item.bidprice*1).toFixed(2) : '--'}}</text>
						<text class="cell el-col-6"
							:class="{'green': item.askprice <= item.preclose, 'red': item.askprice > item.preclose }">{{!isNaN(item.askprice) ? (item.askprice*1).toFixed(2) : '--'}}</text>
					</block>
					<view class="cell hh el-col-6">
						<block>
							<view class="line">{{(item.high*1).toFixed(2)}}</view>
							<view class="line green">{{(item.low*1).toFixed(2)}}</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view class="footer_title">MoXi墨曦珠宝科技</view>
			<view class="footer_tip">提供技术支持</view>
		</view>
	</view>

</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				glod_list: [],
				currentTime: '', // 将时间字符串保存在currentTime变量中,
				// 自定义分享信息
				share_info: {},
				entryTime:0,
				timer:null,
			};
		},
		components: {

		},
		props: {},
		onLoad(params) {
			if(typeof(params)!='undefined'){
				var numberId = params.numberId || '';
				if(numberId != ''){
					uni.clearStorageSync();
					app.globalData.data.numberId = numberId;
				}
			}
			this.init();
		},
		onUnload() {
			if(this.timer){
				clearInterval(this.timer);
				this.timer = null;
			}
			this.OnEntryTime();
		},
		methods: {
			init(e) {
				var user = app.globalData.get_user_info(this, "init", "");
				if (user != false) {
					// 用户未绑定用户则转到登录页面
					if (app.globalData.user_is_need_login(user)) {
						uni.navigateTo({
							url:"/pages/login/login?event_callback=init"
						})
						
					} else {
						//贵金属价格
						this.gjs();
						
						// 定义定时器
						this.timer = setInterval(() => {
							// 获取当前时间
							let currentTime = new Date();
						
							// 获取年份
							let year = currentTime.getFullYear();
						
							// 获取月份（0-11）
							let month = currentTime.getMonth() + 1;
						
							// 获取日期
							let date = currentTime.getDate();
						
							// 获取小时
							let hours = this.addZero(currentTime.getHours());
						
							// 获取分钟
							let minutes = this.addZero(currentTime.getMinutes());
						
							// 获取秒
							let seconds = this.addZero(currentTime.getSeconds());
						
							// 构造时间字符串
							this.currentTime = `${year}/${month}/${date} ${hours}:${minutes}:${seconds}`;
							//贵金属价格
							this.gjs();
						}, 1000); // 每隔10秒更新一次时间
					}
				}
			},
			addZero(i) {
				if (i < 10) {
					i = "0" + i;
				}
				return i;
			},
			gjs() {
				let ne = [
					{
						code: "JZJ_au",
						cnname: "黄 金"
					},
					{
						code: "JZJ_ag",
						cnname: "白 银"
					},
					{
						code: "JZJ_pt",
						cnname: "铂 金"
					},
					{
						code: "JZJ_pd",
						cnname: "钯 金"
					},
					
					{
						cnname: "黄金9999",
						code: "Au99.99"
					},
					{
						cnname: "铂金9995",
						code: "Pt99.95"
					},
					{
						code: "Ag(T+D)",
						cnname: "白银T+D",
					},
					// {
					// 	cnname: "黄金T+D",
					// 	code: "Au(T+D)"
					// },
					// {
					// 	code: "RH_JZL",
					// 	cnname: "铑金",
					// },
					// {
					// 	code: "JZJ_IR",
					// 	cnname: "铱",
					// },
					// {
					// 	code: "JZJ_RU",
					// 	cnname: "钌",
					// },
					
					{
						cnname: "美黄金",
						code: "FT:US.GCmain",
					},
					{
						cnname: "美白银",
						code: "FT:US.SImain",
					},
					{
						cnname: "美铂金",
						code: "FT:US.PLmain",
					},
					{
						cnname: "美钯金",
						code: "FT:US.PAmain",
					},
					{
						cnname: "伦敦金",
						code: "XAU",
					},
					{
						cnname: "伦敦银",
						code: "XAG",
					},
					{
						cnname: "伦敦铂",
						code: "XAP",
					},
					{
						cnname: "伦敦钯",
						code: "XPD",
					},
					
					{
						cnname: "美元",
						code: "USDCNH"
					}
				];
				uni.request({
					url: app.globalData.get_request_url("mxjjs", "index"),
					method: 'POST',
					data: {},
					dataType: 'json',
					success: res => {
						if (res.data.code == 200) {
							var data = res.data.data;
							if (data.items != null) {
								let g_list = [];
								let dg_list = data.items;
								for (let i = 0; i < ne.length; i++) {
									let item = ne[i];
									for (let j = 0; j < dg_list.length; j++) {
										let ditem = dg_list[j];
										if (item.code == ditem.code) {
											g_list.push(ditem);
											break;
										}
									}
								}
								this.glod_list = g_list || [];
							}
							
						} else {
							uni.showToast({
								title: res.data.msg
							})
						}
					},
					fail: () => {
						this.data_list_loding_status = 2;
						this.data_list_loding_msg = '服务器请求出错';
						this.data_bottom_line_status = true;
						this.load_status = 1;
						uni.showToast({
							title: '服务器请求出错'
						})
					}
				});
			},
			OnMetal_buying(code,buyPrice){
				uni.navigateTo({
					url:"/pages/metal_buying/metal_buying?code="+code + '&buyPrice=' + buyPrice
				})
			},
			// 跳转申请质保单
			Onpledge_bond(){
				uni.navigateTo({
					url:"/pages/pledge_bond/pledge_bond"
				})
			},
			OnEntryTime(){
				var radarlog_data = {
					pageUrl:"pages/glod-price/glod-price",
					name:"金价页面",
					remark:"金价页面停留时间",
					entryTime:this.entryTime,
				}
				uni.request({
					url:app.globalData.get_request_url("radarlog/add"),
					data:radarlog_data,
					method:"POST",
					success: (res) => {
						console.log(res,"金价页面停留时间");
					}
				})
			}
		},
		onShow() {
			// 记录用户进来时间
			this.entryTime = Date.now();
		},
		// 分享给朋友
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// console.log(res.target, "target");
			}
			return {
				title: app.globalData.data.tenantName,
				path: "pages/glod-price/glod-price?numberId=" + app.globalData.data.numberId,
				mpId: app.globalData.data.appid
			}
		},
		// 分享朋友圈
		// onShareTimeline(res) {
		// 	return {
		// 		title: app.globalData.data.tenantName,
		// 		type: 0,
		// 		summary: ""
		// 	}
		// }
	};
</script>

<style>
	page {
		background-color: #252525;
	}

	.list-top {
		background-color: #192533;
		/* height: 80px; */
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 70rpx 30rpx 20rpx 30rpx;
	}

	.list-time {
		color: #b99c50;
		font-size: 13px;
	}

	.list-time .name {
		width: 115px;
		height: 18px;
		text-align: center;
		line-height: 18px;
		border: 1px solid #b99c50;
		font-size: 12px;
	}

	.list-name {
		text-align: center;
		color: #b99c50;
		padding-top: 6px;
		font-weight: bold;
		font-size: 20px;
	}
	.apply-name{
		font-size: 12px;
		margin-top: 15rpx;
		color: white;
	}

	.list-name image {
		width: 126rpx;
	}
	.row-top{
		text-align: center;
		display: flex;
		justify-content: space-between;
		padding-left: 55rpx;
		border-bottom: 1px solid #383838;
	}
	.cell-top{
		height: 94rpx;
		text-align: center;
		flex-wrap: wrap;
		color: white;
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		/* border-right: 1px solid #383838; */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list {
		display: flex;
		border-bottom: 1px solid #b99c50;
	}
	.list_title{
		width: 7%;
		/* line-height: 150rpx; */
		text-align: center;
		background-color: #192533;
		color: white;
		font-size: 14px;
		padding-top: 60rpx;
		line-height: 70rpx;
	}
	.list_title_shhjhq{
		width: 7%;
		line-height: 57rpx;
		padding-top: 6rpx;
		text-align: center;
		background-color: #192533;
		color: white;
		font-size: 14px;
	}
	.list_title_gjschq{
		width: 7%;
		line-height: 86rpx;
		padding-top: 40rpx;
		text-align: center;
		background-color: #192533;
		color: white;
		font-size: 14px;
	}
	.list_title_hl{
		width: 7%;
		line-height: 50rpx;
		text-align: center;
		background-color: #192533;
		color: white;
		font-size: 14px;
	}

	.table {
		width: 92%;
		display: flex;
		flex-direction: column;
	}

	.row {
		text-align: center;
		display: flex;
		border-bottom: 1px solid #383838;
	}

	.header {
		color: white;
		font-weight: bold;
	}

	.cell {
		height: 94rpx;
		text-align: center;
		flex-wrap: wrap;
		color: white;
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		border-right: 1px solid #383838;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cell-buy{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.hh {
		width: 100%;
		/* height: 60px; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* 	padding-top: 5px;
			padding-bottom: 5px; */
	}

	.line {
		width: 100%;
		text-align: center;
		margin-bottom: 5px;
		font-size: 13px;
	}

	.green {
		color: greenyellow;
	}

	.red {
		color: red;
	}

	.hei {
		background-color: #000000;
	}

	.huang {
		color: #e9c259;
	}

	.jz {
		line-height: 30px;
	}

	.el-col-8 {
		width: 33.33333%;
	}

	.el-col-6 {
		width: 25%;
	}
	.footer{
		/* position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%); */
		padding-bottom: 40rpx;
		padding-top: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: rgba(255, 255, 255, 0.5);
	}
	.footer_title{
		font-size: 14px;
	}
	.footer_tip{
		font-size: 12px;
	}
</style>